<template>
	<movable-area class="nav"  :style="{height:currentList.length * height + 'rpx'}" id="drag">
		<movable-view v-for="(item,index) in currentList" :key="index"  :id="item.id" :index="index"
			animation=true
			:x="item.x"
			:y="item.y"
			class="nav-item" 
			@change="tochange"
			@touchstart="touchstart"
			@touchmove="touchmove"
			@touchend="touchend"
			catchtouchstart
			catchtouchmove
			catchtouchend
			direction="all">
			{{item.name}}
		</movable-view>
		
	</movable-area>
</template>

<script>
	export default {
		data() {
			return {
				height: 55, // 高度
				width:375,
				currentList: [],
				active: -1, // 当前激活的item
				index: -1, // 当前激活的item的原index
				Nindex:-1, //当前新的index
				Oindex:-1, //记录上
				topY: 0, // 距离顶部的距离
				deviationY: 0, // 偏移量
				deviationX:0,
				list:[{
					name: '最新',
					id: 0,
					ref: 'new'
				}, {
					name: '大公司',
					id: 23,
					ref: 'company'
				}, {
					name: '内容',
					id: 223,
					ref: 'content'
				}, {
					name: '消费',
					id: 221,
					ref: 'xiaofei'
				}, {
					name: '内容',
					id: 223,
					ref: 'content'
				}, {
					name: '消费',
					id: 221,
					ref: 'xiaofei'
				}, {
					name: '内容',
					id: 223,
					ref: 'content'
				}, {
					name: '消费',
					id: 221,
					ref: 'xiaofei'
				}],
				nn:0
			};
		},
		mounted(){
			this.onUpdateCurrentList()
		},
		methods:{
			onUpdateCurrentList(){
				this.currentList = []
				uni.getSystemInfo({
					success:(res) =>{
						//console.log(res.windowWidth)
					}
				})
				let arr = [];
				for(const key in this.list){
					arr.push({
						...this.list[key],
						index:Number(key),
						y: Math.floor(key/4) * this.height,
						x: key%4 * this.width/5 + (key%4*2 + 1)* this.width/40, 
						animation: true,
						nn:this.nn++
					})
				}
				this.$nextTick(()=>{
					this.currentList = arr;
					//console.log(this.currentList)
					this.$forceUpdate();
				})
					
					
				
			},
			touchstart(e){
				//计算y轴的位置  ==》 小程序计算  
				var query = wx.createSelectorQuery()
				query.select('#drag').boundingClientRect() //可移动区域
				query.exec((res)=>{
					this.topY = res[0].top //获取元素的top值
					let touchY = e.mp.touches[0].clientY - res[0].top  //
					this.deviationY = touchY / this.height //第几行
					this.deviationX = e.mp.touches[0].clientX / (this.width/5 + this.width/20) //
					//console.log(this.deviationY,this.deviationX)
					let indexY = Math.floor(this.deviationY)
					let indexX = Math.floor(this.deviationX) + 1
					let check = indexY*4 + indexX - 1 //获得点击的index 从0开始 
					this.index = check;
					this.Oindex = check
 				})
					
			},
			touchmove(e){
				var query = wx.createSelectorQuery()
				query.select('#drag').boundingClientRect() //可移动区域
				query.exec((res)=>{
					this.topY = res[0].top //获取元素的top值
					let touchY = e.mp.touches[0].clientY - res[0].top  //
					this.deviationY = touchY / this.height //第几行
					this.deviationX = e.mp.touches[0].clientX / (this.width/5 + this.width/20) //
					let indexY = Math.floor(this.deviationY)
					let indexX = Math.floor(this.deviationX) + 1
					let check = indexY*4 + indexX - 1 //获得点击的index 从0开始 
					this.Nindex = check>=0?check:0;
					var max = Math.max(this.Nindex,this.Oindex);
					var min = Math.min(this.Nindex,this.Oindex);
					if(this.Nindex >= this.list.length) this.Nindex = this.list.length 
					var narr = this.currentList;
					if(this.index>this.Nindex){
						for(let i=0;i<this.Nindex;i++){
							this.currentList[i].y= Math.floor((i)/4) * this.height;
							this.currentList[i].x=(i)%4 * this.width/5 + ((i)%4*2 + 1)* this.width/40;
						}
						for(let i=this.index;i<this.currentList.length;i++){
							this.currentList[i].y= Math.floor((i)/4) * this.height;
							this.currentList[i].x=(i)%4 * this.width/5 + ((i)%4*2 + 1)* this.width/40;
						}
						for(let i =this.Nindex;i<this.index;i++){
							this.currentList[i].y= Math.floor((i+1)/4) * this.height;
							this.currentList[i].x=(i+1)%4 * this.width/5 + ((i+1)%4*2 + 1)* this.width/40;
						}
						
					}else{
						for(let i=0;i<this.index;i++){
							this.currentList[i].y= Math.floor((i)/4) * this.height;
							this.currentList[i].x=(i)%4 * this.width/5 + ((i)%4*2 + 1)* this.width/40;
						}
						for(let i=this.Nindex;i<this.currentList.length;i++){
							this.currentList[i].y= Math.floor((i)/4) * this.height;
							this.currentList[i].x=(i)%4 * this.width/5 + ((i)%4*2 + 1)* this.width/40;
						}
						for(let i =this.index;i<this.Nindex;i++){
							this.currentList[i+1].y= Math.floor((i)/4) * this.height;
							this.currentList[i+1].x=(i)%4 * this.width/5 + ((i)%4*2 + 1)* this.width/40;
						}
						
					}
				})
			},
			touchend(e){
				console.log(this.Nindex)
				if(this.Nindex>=this.list.length){
					this.onUpdateCurrentList()
					return
				}else{
					var item = this.list[this.index];
					this.list.splice(this.index,1)
					this.list.splice(this.Nindex,0,item)
					this.index = -1;
					this.Nindex = -1;
					this.onUpdateCurrentList()
				}
				
				
				//console.log(this.list)
			}
		},
		watch: {
		  list () {
		    //this.onUpdateCurrentList()
			
		  },
		  deep: true
		}
	}
</script>

<style lang="scss" scoped>
	.nav{
		width: 100%;
		height:100%;
		display: flex;
		flex-wrap:wrap;
		.nav-item{
			width: 20%;
			height: 80rpx;
			border: 1px solid #ddd;
			box-sizing: border-box;
			// display: flex;
			// position: absolute !important;
		}	
	}
	
</style>
